<script setup lang="ts">
import { Key, TreeOption } from '@lewo/components/tree'
import { AccessibilitySharp } from '@vicons/ionicons5'
import { ref } from 'vue'

function createData(level = 4, parentKey = ''): TreeOption[] {
  if (!level) return []
  const arr = new Array(20 - level).fill(0)
  return arr.map((_, idx: number) => {
    const key = parentKey + level + idx
    return {
      label: createLabel(level),
      key,
      children: createData(level - 1, key)
      // disabled: true
    }
  })
}

function createLabel(level: number): string {
  if (level === 4) return '道生一'
  if (level === 3) return '一生二'
  if (level === 2) return '二生三'
  if (level === 1) return '三生万物'
  return ''
}

const data = ref<TreeOption[]>(createData())

function createData2() {
  return [
    {
      label: nextLabel(),
      key: 1,
      isLeaf: false // 这里 isLeaf 为 false，表示点击的时候动态加载子节点
    },
    {
      label: nextLabel(),
      key: 2,
      isLeaf: false
    }
  ]
}

function nextLabel(currentLabel?: string): string {
  if (!currentLabel) return 'Out of Tao, One is born'
  if (currentLabel === 'Out of Tao, One is born') return 'Out of One, Two'
  if (currentLabel === 'Out of One, Two') return 'Out of Two, Three'
  if (currentLabel === 'Out of Two, Three')
    return 'Out of Three, the create universe'
  if (currentLabel === 'Out of Three, the create universe')
    return 'Out of Tao, One is born'
  return ''
}

// const data = ref<TreeOption[]>(createData())
const data2 = ref<TreeOption[]>([
  {
    key: '0',
    label: '0',
    children: [
      {
        key: '0-0',
        label: '0-0'
      },
      {
        disabled: true, // 这个节点被禁用
        key: '0-1',
        label: '0-1',
        children: [
          {
            key: '0-1-0',
            label: '0-1-0'
          },
          {
            key: '0-1-1',
            label: '0-1-1'
          }
        ]
      }
    ]
  }
])

const treeLoad = (node: TreeOption) => {
  return new Promise<TreeOption[]>(resolve => {
    setTimeout(() => {
      resolve([
        // 这个数据会作为当前展开node的children属性
        {
          label: nextLabel(node.label),
          key: node.key + nextLabel(node.label),
          isLeaf: false
        }
      ])
    }, 1000)
  })
}

const value = ref<Key[]>([])

const checkboxValue = ref(true)

const onChange = (val: boolean | string[]) => {
  console.log(val)
}
</script>

<template>
  <z-icon color="red" size="18">
    <AccessibilitySharp />
  </z-icon>

  <z-checkbox v-model="checkboxValue" :indeterminate="true" @change="onChange">
    {{ checkboxValue }}
  </z-checkbox>

  {{ value }}
  <!-- 在使用树组件的时候，会传递一个树型的结构 -->
  <z-tree
    :data="data"
    :on-load="treeLoad"
    v-model:selected-keys="value"
    selectable
    multiple
    show-checkbox
    v-model:checked-keys="value"
    :default-checked-keys="['40', '41']"
  >
    <template #default="{ node }">{{ node.key }} - {{ node.label }}</template>
  </z-tree>
</template>

<style scoped></style>
